<template>
  <layout-slot className="common-page main-content" class="bg-white">
    <source-slot/>


    <div class="common-item">
      <div class="common-title">
        标签 : {{ url }}
      </div>
      <div class="post-lists">
        <div class="post-lists-body">

          <div class="post-list-item" v-for="(tmp,index) of tagArticles">
            <div class="post-list-item-container  bg-green">
              <router-link :to="tmp.url">
                <div class="item-label " :class="bgColor[index % bgColor.length]">
                  <div class="item-title">{{ tmp.name }}</div>
                  <div class="item-meta clearfix">
                    <div class="item-meta-ico bg-ico-book"
                         :style="{
                                background: `url(https://rawchen.com/usr/themes/rawchen/images/bg-ico.png) no-repeat`,
                                backgroundSize: `40px auto`,
                                backgroundPosition:`0 -${(index % 10) * 40}px !important`,}">
                    </div>
                    <div class="item-meta-date">{{tmp.date | dateFormat('{y}-{m}-{d}') }}</div>
                  </div>
                </div>
              </router-link>
            </div>
          </div>

        </div>
      </div>
    </div>


    <!--    <div class="categorys-item" v-for="item of categories">-->
    <!--      <div class="categorys-title">-->
    <!--        <router-link :to="item.url">-->
    <!--          {{ item.name }}-->
    <!--        </router-link>-->
    <!--        <span> ：{{ item.articles.length }}</span>-->
    <!--      </div>-->
    <!--      <div class="post-lists">-->
    <!--        <div class="post-lists-body">-->
    <!--          <div class="post-list-item" v-for="tmp of item.articles">-->
    <!--            <div class="post-list-item-container">-->
    <!--              <router-link :to="tmp.url">-->
    <!--                <div class="item-label">-->
    <!--                  <div class="item-title">{{ tmp.name }}</div>-->
    <!--                  <div class="item-meta clearfix">-->
    <!--                    <div class="item-meta-date">{{tmp.date | dateFormat('{y}-{m}-{d}') }}</div>-->
    <!--                  </div>-->
    <!--                </div>-->
    <!--              </router-link>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
  </layout-slot>
</template>

<script>
  import VueHeader from "./header";
  import VueFooter from "./footer";
  import LayoutSlot from "./slot/layout-slot";
  import {getCategory} from "@/api/category";
  import settings from "@/settings";
  import {getTagArticle} from "@/api/tag";
  import SourceSlot from "@/views/skins/GreenBook/slot/source-slot";

  export default {
    name: "archives",
    components: {SourceSlot, VueHeader, VueFooter, LayoutSlot},
    watch: {
      '$route'(n, o) {
        // console.log(n)
        if (n) {
          this.getCategory()
        }
      }
    },
    data() {
      return {
        statistics: {
          articles: '123+',
          labels: '215+',
          comments: '551+',
          ip: "82860+",
          views: "654813+"
        },
        bgColor: ['bg-green', 'bg-red', 'bg-blue', 'bg-purple', 'bg-orange', 'bg-yellow'],
        categories: [],
        // categories: [
        //   {
        //     name: "点滴记录",
        //     url: "/category/life",
        //     articles: [
        //       {name: "记录下之前始终困扰的限速问题", url: "/life/1", date: "2021-10-25"},
        //       {name: "双枢轴快速排序与 Arrays.sort()", url: "/life/2", date: "2021-10-25"},
        //       {name: "记录下之前始终困扰的限速问题", url: "/life/1", date: "2021-10-25"},
        //       {name: "双枢轴快速排序与 Arrays.sort()", url: "/life/2", date: "2021-10-25"}
        //     ]
        //   },
        //   {
        //     name: "资源分享",
        //     url: "/category/enjoy",
        //     articles: [
        //       {name: "记录下之前始终困扰的限速问题", url: "/life/1", date: "2021-10-25"},
        //       {name: "双枢轴快速排序与 Arrays.sort()", url: "/life/2", date: "2021-10-25"},
        //       {name: "记录下之前始终困扰的限速问题", url: "/life/1", date: "2021-10-25"},
        //       {name: "双枢轴快速排序与 Arrays.sort()", url: "/life/2", date: "2021-10-25"}
        //     ]
        //   },
        //   {
        //     name: "一些代码",
        //     url: "/category/life",
        //     articles: [
        //       {name: "记录下之前始终困扰的限速问题", url: "/life/1", date: "2021-10-25"},
        //       {name: "双枢轴快速排序与 Arrays.sort()", url: "/life/2", date: "2021-10-25"},
        //       {name: "记录下之前始终困扰的限速问题", url: "/life/1", date: "2021-10-25"},
        //       {name: "双枢轴快速排序与 Arrays.sort()", url: "/life/2", date: "2021-10-25"}
        //     ]
        //   },
        //   {
        //     name: "计算机科学与技术",
        //     url: "/category/se",
        //     articles: [
        //       {name: "记录下之前始终困扰的限速问题", url: "/life/1", date: "2021-10-25"},
        //       {name: "双枢轴快速排序与 Arrays.sort()", url: "/life/2", date: "2021-10-25"},
        //       {name: "记录下之前始终困扰的限速问题", url: "/life/1", date: "2021-10-25"},
        //       {name: "双枢轴快速排序与 Arrays.sort()", url: "/life/2", date: "2021-10-25"}
        //     ]
        //   }
        // ]
        tagArticles: []
      }
    },
    props: {
      url: String,
    },
    methods: {
      /**
       * 取出某个标签下的所有文章
       */
      getTagArticle() {
        this.$store.commit("setLoading",true)
        getTagArticle({tagName: this.$route.params.url}).then(({data}) => {
          this.tagArticles = data.data.map((item) => {
            return {
              name: item.articleTitle,
              date: item.articleCreated,
              url: "/article-detail/" + item.oId
            }
          })
          this.$store.commit("setLoading",false)
        })
      }
    },
    mounted() {
      this.getTagArticle()
    }
  }
</script>

